<template>
    <n-form-item :path="path">
        <template #label>
            <span class="flex items-center justify-center">
                <n-popover placement="left-start" trigger="hover">
                    <template #trigger>
                        <n-icon class="mx-2" size="20" color='rgb(0,63,152)'>
                            <QuestionCircle48Filled />
                        </n-icon>
                    </template>
                    <span>{{ tips }}</span>
                </n-popover>
                {{ title }}
            </span>
        </template>
        <slot></slot>
    </n-form-item>
</template>

<script setup>
import { QuestionCircle48Filled } from '@vicons/fluent'
const props = defineProps(["title", "tips", "path"])

</script>